<template>
    <div>

        <mt-swipe :auto="4000">
            <!--由于拿不到数据所以页面不显示内容-->
            <mt-swipe-item v-for="i in LunbotuList" :key="i.url">
                <img :src="i.img">
            </mt-swipe-item>
           
        </mt-swipe>
        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">Home</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
		                    <div class="mui-media-body">Email</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-chatbubble"></span>
		                    <div class="mui-media-body">Chat</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-location"></span>
		                    <div class="mui-media-body">location</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">Search</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">Phone</div></a></li>
		            
		        </ul> 
        
    </div>
</template>

<script>

import {Toast} from 'mint-ui'
export default {
    data (){
        return {
            LunbotuList:[]
        };
    },
    created(){
        this.getLunbotu()
    },
    methods: {
        getLunbotu(){
            
            this.$http.get('http://vue.studyit.io/api/getlunbo').then(result => {
                // console.log("这里开始了"+result.body)
                if(result.body.status === 1){
                    //返回成功
                    this.LunbotuList = result.body.message 
                } else {
                    //加载失败
                    Toast('加载超时')
                }
            })
        }
    }
    
}
</script>

<style lang="less" scoped>
.mint-swipe{
    height:200px;
    .mint-swipe-item{
        &:nth-child(1){
            background-color: red;
        }
        &:nth-child(2){
            background-color: blue;
        }

        &:nth-child(3){
            background-color: black;
        }
        // img{
        //     height: 100%;
        //     width: 100%;
        // }


    }
}
</style>